<template>
  <div style="position: relative;  top: 15vh;">
    <div class="user-name">
      <input v-model="userName" placeholder="请输入手机号" />
    </div>
    <div class="password">
      <input v-model="password" type="password" placeholder="请输入密码" />
    </div>
    <div style="margin: 15px; margin-top: 60px;">
      <van-button type="warning" block size="normal" @click="handleLogin">登录</van-button>
    </div>
  </div>
</template>

<script>
import cache from '@/utils/cached'
export default {
  data() {
    return {
      userName: '',
      password: ''
    }
  },
  onLoad() {
    let userInfo = cache.getUserInfo();
    if(userInfo) {
      this.userName = userInfo.phone;
    }
  },
  methods: {
    handleLogin() {
      let data = {
        username: this.userName,
        password: this.password
      }
      this.$q.login(data)
      .then(res=>{
        cache.setToken(res.access_token)
        let userInfo = {
          phone: res.user_phone,
          name: res.user_name
        }
        cache.setUserInfo(userInfo);
        uni.navigateTo({
          url: '/pages/index/index'
        })
      })
      .catch(err=>{
        this.$dialog.alert({
          message: err.message,
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .user-name,.password {
    margin: 15px;
    input {
      width: auto;
      height: 45px;
      padding: 0 15px;
      line-height: 45px;
      font-size: 16px;
      border-bottom: 1px solid #eee;
    }
  }
</style>